<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>03_回到顶部</title>
  <style>
    #to_top {
      width: 30px;
      height: 40px;
      font: 14px/20px arial;
      text-align: center;
      background: #06c;
      position: fixed;
      cursor: pointer;
      color: #fff;
      left: 1050px;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">

<div id="to_top">返回顶部</div>
<script src="jquery-1.10.1.js"></script>
<script>
  $('#to_top').click(function () {
    var i=$('html,body').scrollTop()
    var timer=setInterval(function () {
      i=i-10
      i<=0?clearInterval(timer):i
      $('html,body').scrollTop(i)
    },50)

    // var $page=$('html,bdoy')
    // // 总距离
    // var distance=$('html,body').scrollTop()
    // // 总时间
    // var time=500
    // // 间隔时间
    // var intervalTime=50
    // // 移动速度
    // var itemDistance=distance/(time/intervalTime)
    //
    // var intervalID=setInterval(function () {
    //   distance-=itemDistance
    //   if (distance<=0){
    //     distance=0
    //     clearInterval(intervalID)
    //   }
    //   $page.scrollTop(distance)
    // },intervalTime)
  })
</script>
</body>

</html>
